<template>
  <el-button
    style="background-color: #7acefe; border-color: #0ea3f7; color: #0ea3f7"
    size="mini"
    @click="dialogFormVisible = true"
  >
    <el-icon style="color: #0ea3f7; border: 1px"><Plus /></el-icon>&emsp;新增
  </el-button>

  <div class="common-layout">
    <el-container>
      <el-aside width="200px" style="margin-top: 10px">
        <el-tree
          ref="treeRef"
          class="filter-tree"
          :data="data"
          :props="defaultProps"
          style="
            width:200px;
            border: 0px solid #ccc;
            height: 800px;
            float: left;
          "
          default-expand-all
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          @node-click="handleNodeClick"
          check-change="handleCheckChange"
        />
      </el-aside>

      <el-main style="margin-left: 0px;" :fixed="true">
        <el-form :model="form" label-width="auto" style="max-width: 1000px;">
          <el-form-item label="分类编码">
            <el-input v-model="form.mclassifyencode" />
          </el-form-item>

          <el-form-item label="分类名称">
            <el-input v-model="form.materialTypeName" />
          </el-form-item>

          <el-form-item label="计量单位">
            <el-select v-model="form.measureId" placeholder="请选择">
              <el-option
                v-for="item in measureList"
                :label="item.measureName"
                :value="item.measureId"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="流水号长度">
            <el-input v-model="form.serialnumber" />
          </el-form-item>

          <el-form-item label="供应方式">
            <el-select v-model="form.supplyId" placeholder="请选择">
              <el-option
                v-for="item in supplyList"
                :label="item.supplyName"
                :value="item.supplyId"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="分类状态">
            <el-select v-model="form.classifystateId" placeholder="请选择">
              <el-option
                v-for="item in classifystateList"
                :label="item.classifystateName"
                :value="item.classifystateId"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>

  <!-- 物料分类弹出层 -->
  <div>
    <el-dialog v-model="dialogFormVisible" title="物料基本档添加" width="500">
      <el-form :model="forms">
        <el-form-item label="分类编码" :label-width="formLabelWidth">
          <el-input v-model="forms.mlassifyencode" autocomplete="off" />
        </el-form-item>

        <el-form-item label="分类名称" :label-width="formLabelWidth">
          <el-input v-model="forms.materialTypeName" autocomplete="off" />
        </el-form-item>

        <el-form-item label="父级" :label-width="formLabelWidth">
          <el-input v-model="forms.pId" autocomplete="off" />
        </el-form-item>

      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="AddMaterilss"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { useRoute } from "vue-router";
import Cookie from "cookies-ts";
import axios from "axios";
import router from "@/router";
const apiurls = import.meta.env.VITE_APP_API_URL_BasicInformationCommon;//5176
const bpiurls = import.meta.env.VITE_APP_API_URL_BasicInformationWrite;//5013
// const cpiurls = import.meta.env.VITE_APP_API_URL_RBACCommon;//5214
// const dpiurls = import.meta.env.VITE_APP_API_URL_RBACWrite;//5268
// const epiurls = import.meta.env.VITE_APP_API_URL_SalesManagementCommon;//5227
// const fpiurls = import.meta.env.VITE_APP_API_URL_SalesManagementWrite;//5020

const filterNode = (value: string, data: any) => {
  if (!value) return true;
  return data.label.includes(value);
};

//树形级联
const defaultProps = {
  children: "children",
  label: "label"
};
//树形数据
var data = ref([]);
function GetBang() {
  axios({
    url: apiurls+"/api/Materials/GetmaterialTree",
    method: "get"
  }).then((res) => {
    data.value = res.data.data;
    console.log(res.data.data, 111111);
  });
}
//反填数据
const handleNodeClick = (data: any) => {
  console.log(data, 2222);
  uptform.materialTypeName = data.label;
  uptform.pId = data.value;
  console.log(uptform.pId);

  axios({
    url: apiurls+"/api/Materials/GetmaterialfanTian",
    method: "get",
    params: {
      materialTypeId: uptform.pId
    }
  }).then((res) => {
    (form.mclassifyencode = res.data.data.mclassifyencode),
      (form.materialTypeName = res.data.data.materialTypeName),
      (form.measureId = res.data.data.measureId),
      (form.serialnumber = res.data.data.serialnumber),
      (form.supplyId = res.data.data.supplyId),
      (form.classifystateId = res.data.data.classifystateId);
  });
};
const uptform = reactive({
  materialTypeName: "",
  pId: 0
});

//计量单位
const measureList: any = ref([]);
function GetJil() {
  axios({
    url: apiurls+"/api/Materials/Getmeasureunits",
    method: "get"
  }).then((res) => {
    measureList.value = res.data.data;
    console.log(res.data.data, 123123123);
  });
}
//绑定供应方式
const supplyList: any = ref([]);
function GetGongy() {
  axios({
    url: apiurls+"/api/Materials/Getsupplymanners",
    method: "get"
  }).then((res) => {
    supplyList.value = res.data.data;
    console.log(res.data.data, 123123123);
  });
}

//绑定分类状态
const classifystateList: any = ref([]);
function GetFenlzt() {
  axios({
    url: apiurls+"/api/Materials/GetClassifyzt",
    method: "get"
  }).then((res) => {
    classifystateList.value = res.data.data;
    console.log(res.data.data, 123123123);
  });
}
//加载物料分类信息
var form = reactive({
  mclassifyencode: "",
  materialTypeName: "",
  measureId: "",
  serialnumber: "",
  supplyId: "",
  classifystateId: ""
});

//弹出层添加
const forms = reactive({
    materialTypeName:'',
    mlassifyencode:'',
    pId:''
});

const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
function AddMaterilss() {
if(forms.materialTypeName=="")
{
  ElMessage.error("请输入分类名称")
  return;
}
if(forms.mlassifyencode=="")
{
  ElMessage.error("请输入分类编码")
  return;
}
if(forms.pId=="")
{
  ElMessage.error("请输入父级")
  return;
}


  axios({
    url: bpiurls+"/api/Materwrite/Handle",
    method: "post",
    data: forms
  }).then((res) => {
    if (res.data.code == 0) {
      ElMessage.success("添加成功");
      dialogFormVisible.value = false;
      GetBang()
    } else {
      ElMessage.error("添加失败");
    }
  });
}

//就绪函数
onMounted(() => {
  //绑定树形
  GetBang();
  //绑定计量单位
  GetJil();
  //绑定供应方式
  GetGongy();
  //绑定分类状态
  GetFenlzt();
});
</script>
